<script setup>
import { ref } from "vue";
import { userInfo } from "../../state/user";
import MaterialCard from "@/components/MaterialCard.vue";
import ListHeadLine from "@/components/list/ListHeadLine.vue";
import LogoutDialog from "./LogoutDialog.vue";
import MaterialDialog from "../MaterialDialog.vue";
import ChangePasswordDialog from "./ChangePasswordDialog.vue";
import "@material/web/list/list.js";
import "@material/web/list/list-item.js";

const logoutDialogOpen = ref(false);
const changePasswordDialogOpen = ref(false);
const failed = ref(false);
const dialogMessage = ref(null);
</script>

<template>
  <LogoutDialog :open="logoutDialogOpen" @close="logoutDialogOpen = false"></LogoutDialog>
  <ChangePasswordDialog :open="changePasswordDialogOpen" @close="changePasswordDialogOpen = false"
    @error="message => { failed = true; dialogMessage = { title: '密码修改失败', message } }">
  </ChangePasswordDialog>

  <div id="account" role="presentation">
    <MaterialCard class="account-item">
      <md-icon class="icon">account_circle</md-icon>
      <div class="username" role="presentation">
        <p class="title-medium">{{ userInfo.username }}</p>
      </div>
      <div class="description" role="presentation">
        <p class="body-small">{{ userInfo.isAdmin ? "管理员" : "普通用户" }}</p>
      </div>
    </MaterialCard>
    <ListHeadLine>登录凭证</ListHeadLine>
    <md-list>
      <md-list-item type="button" @click="changePasswordDialogOpen = true">
        <div slot="headline">密码</div>
        <div slot="supporting-text">已创建，点击以更改</div>
      </md-list-item>
      <md-list-item type="button">
        <div slot="headline">安全密钥</div>
        <div slot="supporting-text">已绑定，点击以修改</div>
      </md-list-item>
    </md-list>
    <ListHeadLine>操作</ListHeadLine>
    <md-list>
      <md-list-item type="button" @click="logoutDialogOpen = true">
        <div slot="headline">注销登录</div>
      </md-list-item>
    </md-list>
    <MaterialDialog :open="failed" @close="failed = false">
      <template #headline>
        {{ dialogMessage?.title }}
      </template>

      <template #content>
        <form id="failed-dialog" method="dialog">
          {{ dialogMessage?.message }}
        </form>
      </template>

      <template #actions>
        <md-text-button autofocus type="submit" form="failed-dialog">确定</md-text-button>
      </template>
    </MaterialDialog>
  </div>
</template>

<style scoped>
#account {
  padding: 16px max(15%, 16px);
}

.account-item {
  display: grid;
  grid-template-areas: "icon username"
    "icon description";
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 12px;
}

.account-item>.icon {
  grid-area: icon;
  padding: 16px;
  --md-icon-size: 32px;
}

.account-item>.username {
  grid-area: username;
}

.account-item>.description {
  grid-area: description;
}

.account-item>.username,
.account-item>.description {
  display: flex;
  align-items: center;
}
</style>
../MaterialCard.vue